<!--数字人管理——形象展示-->
<template>
  <div class="ele-body">
     <el-card>
       <el-button @click="addImage" type="primary">刷新形象</el-button>
     </el-card>
    <el-card>
      <el-row :gutter="15" class="flex-wrap " style="padding: 20px;background-color: #fff">
        <!--        <el-radio-group v-model="isShow">-->
        <el-col :xs="8" :sm="6" :lg="4" :xl="4" v-for="(i,j) in list" :key="j">
          <!-- mouseover _鼠标事件，暂隐藏 -->
          <div class="relative" v-on:mouseover="hover=j" v-on:mouseleave="hover=-1" @click="mouseClick(i.id)">
            <!--              <el-radio :label="i.id" class="radio-cls">{{''}}</el-radio>-->
            <div class="flex-column all-padding" :style="isShow==i.id ? 'background-color: #e8f1ff;border: 1px solid #4190ff;':''">
              <!--
              区分横竖屏图片
              <div style="height:300px" class="flex">
                <img :src="i.image" :style="i.resolutionType==1?'height:150px;width:auto;':'width:100%;height:300px'" />
              </div>-->
              <img :src="i.image" />
              <!--圆角三角形-->
              <div class="triangle-cls" v-show="isShow==i.id"></div>
              <div class="title font-overflow">{{i.imgName}}</div>
              <div class="title-border"></div>
              <span class="color999 fontSize12 font-overflow2 line-height20" style="height: 40px">{{i.description}}</span>
              <div class="flex-align-center width100">
                <div class="flex-column around-class">
                  <span>关联任务</span>
                  <div>{{i.associatedTasks || 0}}</div>
                </div>
                <el-divider direction="vertical"></el-divider>  <!--分割线-->
                <div class="flex-column around-class">
                  <span>形象发布</span>
                  <div>{{i.imageRelease || 0}}</div>
                </div>
              </div>
            </div>
            <el-button class="release-btn flex pointer" :style="isShow==i.id ? 'display:flex;':'display:none'"
                       @click="releaseClick(i)">去发布任务</el-button>
            <!--<el-button class="release-btn flex pointer" :style="hover>=0 && hover==j ? 'display:flex;':'display:none'"
                       @click="releaseClick(i)">去发布任务</el-button>-->
          </div>
        </el-col>
        <!--        </el-radio-group>-->
      </el-row>
      <!--<el-pagination
        background
        layout="prev, pager, next"
        :total="1000">
      </el-pagination>-->
      <el-pagination
        background
        layout="prev, pager, next,jumper, ->, total"
        :total="listCount"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-size="form.limit"
        style="text-align: center">
      </el-pagination>
    </el-card>
     <!--@load="queryImage"-->
    <create-task :visible.sync="drawer" ref="releases"></create-task>
  </div>
</template>

<script>
  import CreateTask from "@/views/digitalHumanManagement/imageDisplay/components/create-task";
  import {queryImagePage, addImages, getAiList} from "@/api/digitalHumanManagement/imageDisplay";
  export default {
    name: "index",
    components: {CreateTask},
    data(){
      return{
        isShow:0,
        hover:-1,
        drawer:false,
        currentPage:1,
        list:[],
        listCount:0,
        form:{
          page:1,
          limit:6
        },
        // 数字人AI人声list
        aiList:[]
      }
    },
    created(){
      this.queryImage()
      this.initAiList()
    },
    methods:{
      initAiList(){
        getAiList()
          .then((data) => {
            console.log("ai人声获取data",data)
            this.aiList=data
          })
      },
      // 添加形象
      addImage(){
        addImages({})
          .then((data) => {
            console.log('添加形象',data)
            this.queryImage()
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },
      // 查询形象
      queryImage(){
        queryImagePage(this.form)
          .then((data) => {
            this.list=data.list
            /*this.list.forEach((item) => {
              this.$set(item, 'isShow', false)
            })*/
            this.listCount=data.count
            console.log('查询形象',data,'this.list',this.list)
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },
      //点击按钮切换页面
      handleCurrentChange(currentPage) {
        this.form.page = currentPage; //每次点击分页按钮，当前页发生变化
        this.queryImage()
        console.log('this.currentPage)', this.currentPage);
      },
      // 点击开票，选择形象
      mouseClick(index){
        this.isShow=index
        console.log('this.isShow',this.isShow)
      },
      // 去发布任务——形象展示
      releaseClick(e){
        console.log('去发布任务e====',e)
        this.drawer=true
        this.$nextTick(()=>{
          console.log("e.types",e.types)
          this.$refs['releases'].show(e)
          this.$refs['releases'].getAiList(this.aiList,e.types)
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .radio-cls{
    position:absolute;
    top: 15px;
    right:-20px;
    z-index: 999;
  }

  .triangle-cls{
    position: absolute;
    top: 10px;
    right:10px;
    z-index: 999;
    width: 18px;
    height: 18px;
     background: linear-gradient(225deg, #4190ff, #4190ff 53%, transparent 44%, transparent 100%) !important;
     border-top-right-radius: 10px;
    /*background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%) !important;*/
  }
  .all-padding:hover{
    /*background-color: #e8f1ff;*/
    border: 1px solid #4190ff;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    /*box-shadow:inset 0px 0px 10px 20px #f7f7f7;*/ // 内阴影
    /*box-shadow: 0px 0px 10px 20px #f7f7f7;*/  // 外阴影
  }
  .all-padding{
    border: 1px solid #fff;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0px 4px 4px 0px #0000000F;
    margin-bottom: 20px;
    border-radius: 10px;
    img{
      max-height: 350px;
      /*background-color: #000000;*/
      /*width: 100%;*/
      margin-bottom: 20px;
    }
    .title{
      font-size: 14px;
      color: #000;
    }
    .title-border{
      border-bottom: 1px solid #000;
      width: 27px;
      margin: 10px 0;
    }
    .around-class{
      padding: 15px 0;
      width: calc(100%/2);
      span{
        color: #666;
        font-size: 12px;
      }
      div{
        margin-top: 15px;
        color: #1E6CEB;
        font-size: 14px;
      }
    }
  }
  .release-btn{
    border-left: 1px solid #4190ff;
    border-right: 1px solid #4190ff;
    border-bottom: 1px solid #4190ff;
    z-index: 9;
    position: absolute;
    bottom: 0px ;
    padding: 10px 0;
    /*width: calc(100% - 20px);*/
    width: 100%;
    background-color: #1E6CEB;
    border-radius: 0px 0px 10px 10px;
    color: #fff;
    font-size: 16px;
  }

</style>
